<template>
  <div>
    <Tabs v-model="tabParam.heavyOrEmpty">
      <template v-for="item in containerStatues">
        <TabPane :label="item.label" :name="item.val"></TabPane>
      </template>
    </Tabs>
    <Row v-if="+tabParam.heavyOrEmpty ==1">
      <i-col>
        <Form ref="tabParam" :model="tabParam" label-position="right" inline>
          <FormItem>
            <Button type="primary" @click="exportDataInventory">
              <Icon type="ios-download-outline"></Icon>
              导出原始数据
            </Button>
          </FormItem>
          <FormItem label="绑箱时间：">
            <DatePicker v-model="timeSlot.timeVal" type="daterange" :options="timeSlot.timeOptions" split-panels
                        placeholder="绑箱时间" format="yyyy年MM月dd日" style="width: 230px">
            </DatePicker>
          </FormItem>
          <FormItem label="送货地址：">
            <Select v-model="tabParam.address" clearable style="width:160px">
              <Option v-for="item in addressList" :value="item" :key="item">{{ item }}</Option>
            </Select>
          </FormItem>
          <FormItem label="货物名称：">
            <Input type="text" v-model="tabParam.pm" placeholder="品名"></Input>
          </FormItem>
          <FormItem label="集装箱号：">
            <Input type="text" v-model="tabParam.constainerNo" placeholder="集装箱号"></Input>
          </FormItem>
          <FormItem label="联运单号：">
            <Input type="text" style="width:260px"  v-model="tabParam.mainOrderNo" placeholder="联运单号"></Input>
          </FormItem>
          <br>
          <FormItem label="运单状态：">
            <Select v-model="tabParam.state" multiple>
              <Option v-for="item in orderStatues" :value="item.val" :key="item.val">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch" icon="ios-search">
              搜索
            </Button>
          </FormItem>
        </Form>
        <tablePage ref="orderReportNewTab" :api="quertFleetReportFormByPage" :param="tabParam">
          <template slot-scope="props">
            <Table :columns="containerColumn" border :data="props.data"></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>
    <Row v-if="+tabParam.heavyOrEmpty ==0">
      <i-col>
        <noLoadContainers></noLoadContainers>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import noLoadContainers from './components/noLoadContainers'
  import tablePage from '@components/table/tablePage.vue'
  import {quertFleetReportFormByPage} from '@api/backEnd/report'
  // import { getAddressList, getOwnFleet } from '@api/backEnd/station'
  import {getAddressList} from '@api/backEnd/station'
  import {exportUtil} from '@/vendor/exportInvoke'
  import moment from 'moment'

  export default {
    name: '',
    data () {
      let addressList = []
      let timeTypes = {
        startTime: 0,
        endTime: 1
      }
      let containerStatues = [
        {label: '重箱出场', val: '1'},
        {label: '非重箱出场', val: '0'}
      ]
      let orderStatues = [
        // {label: '入线预报', val: '0'},
        // {label: '出线预报', val: '0'},
        {label: '待发运', val: '1'},
        {label: '运输中', val: '4,5'},
        {label: '派送中', val: '2,3'},
        {label: '已完成', val: '6'}
      ]
      let timeSlot = {
        timeOptions: {
          shortcuts: [
            {
              text: '最近一周 ',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三个月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        },
        timeVal: []
      }
      let tabParam = {
        mainOrderNo: '',
        pm: '',
        constainerNo: '',
        address: '',
        fleetId: '',
        state: [],
        heavyOrEmpty: containerStatues[0].val,
        startTime: timeSlot.timeVal[0],
        endTime: timeSlot.timeVal[1]
      }
      let containerColumn = [
        {
          title: '联运单号',
          key: 'mainOrderNo',
          ellipsis: 'false',
          fixed: 'left',
          width: 200
        },
        {
          title: '子单号',
          ellipsis: 'false',
          key: 'subOrderId',
          width: 200
        },
        {
          title: '货票号',
          ellipsis: 'false',
          key: 'waybillNo',
          width: 100
        },
        {
          title: '集装箱号',
          ellipsis: 'false',
          key: 'containerNo',
          width: 140
          // render: (h, params) => {
          // let thisdata = params.row.container_no_head + params.row.container_no_body
          // return (<span>{thisdata}</span>)
          // }
        },
        {
          title: '发货人',
          ellipsis: 'false',
          key: 'shipper',
          width: 200
        },
        {
          title: '收货人',
          ellipsis: 'false',
          key: 'receiver',
          width: 200
        },
        {
          title: '货物名称',
          ellipsis: 'false',
          key: 'pm',
          width: 100
        },
        {
          title: '发站',
          ellipsis: 'false',
          key: 'startStationName',
          width: 100
        },
        {
          title: '到站',
          ellipsis: 'false',
          key: 'endStationName',
          width: 100
        },
        {
          title: '发站时间',
          ellipsis: 'false',
          key: 'startStationTime',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.start_station_time
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '到站时间',
          ellipsis: 'false',
          key: 'endStationTime',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.end_station_time
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '子运单状态',
          ellipsis: 'false',
          key: 'state',
          width: 150,
          render: (h, params) => {
            let txt = ''
            let color = ''
            if (params.row.state === 6) {
              txt = '已完成'
              color = 'green'
            } else if (params.row.state === 5 || params.row.state === 4) {
              txt = '配送中'
              color = 'yellow'
            } else if (params.row.state === 1) {
              txt = '待配送'
              color = 'blue'
            } else if (params.row.state === 2 || params.row.state === 3) {
              txt = '待拉运'
              color = 'red'
            }
            return (<tag type="dot" color={color}>{txt}</tag>)
          }
        },
        // {
        //   title: '子运单状态',
        //   ellipsis: 'false',
        //   key: 'bind_time',
        //   width: 150,
        //   render: (h, params) => {
        //     let item = params.row
        //     let txt = ''
        //     let color = ''
        //     if (item.voucher_img && item.fleet_id && item.driver_id) {
        //       txt = '已完成'
        //       color = 'green'
        //     } else if (item.fleet_id && item.driver_id && item.shipping_address) {
        //       txt = '配送中'
        //       color = 'yellow'
        //     } else if (item.fleet_id) {
        //       txt = '待配送'
        //       color = 'blue'
        //     } else if (!item.fleet_id && !item.driver_id) {
        //       txt = '待拉运'
        //       color = 'red'
        //     }
        //     return (<tag type="dot" color={color}>{txt}</tag>)
        //   }
        // },
        {
          title: '绑箱时间',
          ellipsis: 'false',
          key: 'bindTime',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.bind_time
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '司机名称',
          ellipsis: 'false',
          key: 'driverName',
          width: 100
        },
        {
          title: '车牌号',
          ellipsis: 'false',
          key: 'truckPlate',
          width: 100
        },
        {
          title: '送货地址',
          ellipsis: 'false',
          key: 'outAddress',
          width: 100
        },
        {
          title: '接取送达费',
          ellipsis: 'false',
          key: 'receiveFee',
          width: 100,
          render: (h, params) => {
            let thisdata = params.row.receiveFee
            thisdata = params.row.receiveFee + params.row.deliverFee
            return (<span>{thisdata}</span>)
          }
        }
      ]
      let datas = {
        tabParam,
        containerColumn,
        quertFleetReportFormByPage,
        containerStatues,
        timeTypes,
        timeSlot,
        addressList,
        orderStatues
      }
      return datas
    },
    methods: {
      handleSearch (param) {
        console.log('tabParam', this.tabParam)
        this.$refs['orderReportNewTab'].dataRefresh()
      },
      exportDataInventory () {
        let param = Object.assign({}, this.tabParam)
        param.page = 1
        param.pageSize = 100000
        quertFleetReportFormByPage(param).then(res => {
          if (res.data.isSuccess === 1) {
            let resDate = res.data.data.rows
            // let resColumns = JSON.parse(JSON.stringify(this.stationColumn))
            let result = this.fasetJson(resDate)
            exportUtil.export2Excel('业务报表', result.columns, result.data)
          }
        })
      },
      fasetJson (tabData) {
        let result = {
          columns: [
            { title: '联运单号', key: 'mainOrderNo' },
            { title: '子单号', key: 'subOrderId' },
            { title: '货票号', key: 'waybillNo' },
            { title: '集装箱号', key: 'containerNo' },
            { title: '发货人', key: 'shipper' },
            { title: '收货人', key: 'receiver' },
            { title: '货物名称', key: 'pm' },
            { title: '发站', key: 'startStationName' },
            { title: '到站', key: 'endStationName' },
            { title: '发站时间', key: 'startStationTime' },
            { title: '到站时间', key: 'endStationTime' },
            { title: '子运单状态', key: 'state' },
            { title: '绑箱时间', key: 'bindTime' },
            { title: '司机名称', key: 'driverName' },
            { title: '车牌号', key: 'truckPlate' },
            { title: '送货地址', key: 'outAddress' },
            { title: '接取送达费', key: 'receiveFee' }
          ],
          data: []
        }
        let indexCount = 0
        tabData.forEach((item) => {
          if (item.state === 6) {
            item.state = '已完成'
          } else if (item.state === 4 || item.state === 5) {
            item.state = '配送中'
          } else if (item.state === 1) {
            item.state = '待配送'
          } else if (item.state === 2 || item.state === 3) {
            item.state = '待拉运'
          }
          let dataItem = {
            main_order_no: item.mainOrderNo,
            order_no: item.subOrderId,
            waybill_no: item.waybillNo,
            container_no_body: item.containerNo,
            shipper: item.shipper,
            receiver: item.receiver,
            product_name: item.pm,
            start_station_name: item.startStationName,
            end_station_name: item.endStationName,
            start_station_time: item.startStationTime,
            end_station_time: item.endStationTime,
            state: item.state,
            bind_time: item.bindTime,
            driver_name: item.driverName,
            truck_plate: item.truckPlate,
            shipping_address: item.shippingAddress,
            receiveFee: item.receiveFee
          }
          result.data.push(dataItem)
          indexCount++
        })
        console.log(indexCount)
        return result
      }
    },
    watch: {
      'timeSlot.timeVal': function (val, oldval) {
        if (val && val[0] && val[1]) {
          this.tabParam.startTime = moment(val[0]).format('YYYY-MM-DD') + ' 00:00:00'
          this.tabParam.endTime = moment(val[1]).format('YYYY-MM-DD') + ' 23:59:59'
        } else {
          delete this.tabParam.startTime
          delete this.tabParam.endTime
        }
      }
    },
    mounted () {
      getAddressList().then(res => {
        if (res.data.isSuccess === 1) {
          this.addressList = res.data.data
        }
      })
    },
    components: { tablePage, noLoadContainers },
    created () {
      if (powerUtil.contains('comingFleet')) {
        this.tabParam.isFleet = true
      }
    }
  }
</script>
<style scoped>
  .lh-32 {
    line-height: 32px;
    margin-right: 5px;
  }
</style>
